<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>预加载</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.loadingBar{
				width: 400px;
				height: 50px;
				border: 1px solid black;
			}
			.progress{
				width: 0;
				height: 100%;
				background: green;
			}
		</style>
	</head>
	<body>
		加载进度
		<div class="loadingBar">
			
			<div class="progress"></div>
		</div>
		<button>1.jpg</button>
		<button>2.jpg</button>
		<button>3.jpg</button>
		<button>4.jpg</button>
		<button>5.jpg</button>
		<img src="" alt=""/>
		<script src="jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="preload.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//创建对象
			var queue=new createjs.LoadQueue()
			
			//监听进度
			queue.on("progress",function(e){															//手写加载进度
				//获取百分比
				var p =e.progress*100 +"%";
				$(".progress").css({"width":p})
				//console.log(e)
				console.log(p)
			},this)
			//监听完成
			queue.on("complete",function(){
				console.log("complete")
				$("button").on("click",function(){
					var i =$(this).index()+1;
					$("img").attr("src","../image/"+i+".jpg")
				})
				
				
			},this)
			
			//加载    资源列表
			queue.loadManifest([
				{id:"1",src:"../../image/gamersky_08origin_15_201892517282A5.jpg"},
				{id:"2",src:"../../image/gamersky_04origin_07_20178262058999.jpg"},
				{id:"3",src:"../../image/gamersky_04origin_07_20178262058999.jpg"},
				{id:"4",src:"../../image/gamersky_04origin_07_20178262058999.jpg"},
				{id:"5",src:"../../image/gamersky_04origin_07_20178262058999.jpg"},
			])
		</script>
	</body>
</html>
